<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            font-size: 30px;
            color: #fff;
            position: fixed;
            top: 0;
            /* viewport视口 100vw:撑满整个视口宽度,占100% vh视口高度 */
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部广告条</div>
    <div class="left">我是左侧广告条</div>
    <div class="right">我是右侧广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt nesciunt porro totam! Ab
            asperiores distinctio ipsa molestias, nesciunt numquam porro tenetur vel! At debitis dolorem et illum in
            nisi!
        </div>
        <div>A ea placeat porro quia! Accusamus accusantium ad aliquid aperiam, architecto at blanditiis consequuntur
            delectus deleniti doloremque dolores eaque esse fugiat, magni maiores natus necessitatibus obcaecati odio
            officia provident temporibus.
        </div>
        <div>Ad expedita, facere nesciunt optio tempora voluptate! Aperiam asperiores aut cum cumque deleniti
            dignissimos distinctio dolor ducimus est et fuga impedit iure labore natus nesciunt nobis perferendis quasi
            quod, tempora.
        </div>
        <div>Adipisci, animi commodi cupiditate deleniti dignissimos doloremque error eveniet inventore itaque
            laudantium maxime mollitia numquam officiis omnis pariatur quaerat quasi, quo quos ratione repellat sunt
            tempore temporibus tenetur? Placeat, quisquam!
        </div>
        <div>Accusamus aliquid amet asperiores error explicabo laborum, nam nemo neque placeat praesentium reprehenderit
            rerum sed, soluta ullam velit. Amet cumque itaque nulla omnis porro quaerat repellendus ut? Aut,
            consectetur, possimus?
        </div>
        <div>A ab cum dicta eaque error expedita maiores nostrum, odit reiciendis reprehenderit? Assumenda dignissimos
            iure libero nobis provident quis voluptatem. Aperiam in nisi reiciendis veniam veritatis. Eos necessitatibus
            voluptas voluptates.
        </div>
        <div>Aperiam beatae blanditiis id labore maiores placeat possimus quibusdam repudiandae suscipit? Cumque harum
            hic ipsum necessitatibus nemo non quia quisquam quod. Aperiam consequatur doloribus hic illo in temporibus
            voluptas voluptatem!
        </div>
        <div>Accusamus distinctio officia tempore. Ab accusamus beatae consectetur delectus doloremque dolorum ea eius
            enim esse eveniet excepturi ipsam laudantium necessitatibus neque nihil nobis, numquam officiis quibusdam
            quo, rem sit sunt?
        </div>
        <div>Culpa dolore quia suscipit! A aut corporis culpa earum, eius expedita fugiat rerum ut? Consequuntur
            corporis dolore iusto laudantium libero molestias nostrum officia officiis pariatur rem, reprehenderit,
            sequi veniam, voluptatem.
        </div>
        <div>Blanditiis eligendi expedita illum iusto laborum minima, nulla omnis possimus praesentium qui repellendus
            sit, veniam voluptate? Accusantium asperiores autem consequatur dolores ex impedit molestiae velit vitae. Ad
            aperiam mollitia repellendus!
        </div>
        <div>At beatae, dolores doloribus earum eos exercitationem fuga illo ipsa laborum modi molestiae necessitatibus
            odit perferendis quo, quos saepe sapiente. Ad at culpa eos eveniet inventore quidem rerum ut vitae!
        </div>
        <div>A architecto consectetur deserunt eius esse eum eveniet expedita hic iste iusto, laboriosam modi mollitia
            nemo nostrum repellat sequi soluta tenetur veniam. Asperiores consectetur ducimus facilis iusto minima sint,
            voluptate.
        </div>
        <div>Atque eveniet illum mollitia necessitatibus, nesciunt nisi nostrum reprehenderit repudiandae velit.
            Accusamus ad architecto dolor omnis perferendis quasi quo quos recusandae ut veniam? Aperiam dicta iste,
            laborum nam necessitatibus ut!
        </div>
        <div>Aliquid animi asperiores beatae cumque deleniti deserunt doloremque earum, eos error ex expedita id
            mollitia necessitatibus nesciunt numquam, odit praesentium sint suscipit! Amet commodi distinctio ea harum
            inventore porro, rem.
        </div>
        <div>A accusamus ad autem consectetur corporis cum doloremque eveniet illum itaque iusto labore nisi officiis
            quam, sequi sunt totam voluptatem, voluptatibus? At, fuga iusto pariatur quos suscipit temporibus tenetur
            voluptatibus.
        </div>
        <div>Inventore iusto quidem tempora. Sapiente, totam vitae! Animi commodi consectetur cum cupiditate explicabo
            facilis magni nobis sapiente veniam voluptates! Alias amet dignissimos dolor error modi neque nisi nulla
            omnis pariatur?
        </div>
        <div>Architecto atque labore libero rem rerum velit veritatis. Ab adipisci aliquam animi consectetur, cumque
            incidunt iste, libero magnam mollitia nemo obcaecati possimus praesentium, quas. Distinctio et neque sint
            temporibus tenetur!
        </div>
        <div>Asperiores atque beatae cum delectus deleniti dolor eaque fugiat fugit incidunt iste minus molestias,
            mollitia nam necessitatibus numquam pariatur quas quasi quia quibusdam ratione recusandae reprehenderit
            sequi. Et, iure, ullam.
        </div>
        <div>Accusantium, ad cum dolores eligendi eos ex facere, hic ipsam, possimus quia quos recusandae sequi soluta.
            Alias atque aut, cupiditate dicta iste laudantium minus, nulla quas quia quidem totam vero?
        </div>
        <div>Consectetur fugit iste itaque iure laboriosam maxime molestias neque nesciunt, nihil, nobis, pariatur
            possimus. Architecto autem, commodi, corporis culpa, eius est incidunt molestias quam recusandae saepe sequi
            tempore vero voluptatibus.
        </div>
        <div>Accusantium asperiores aspernatur culpa cumque dignissimos enim odit optio porro similique. Adipisci
            consequatur cumque delectus deleniti doloremque enim eum harum id iste natus non provident, sapiente sit
            temporibus velit voluptatem?
        </div>
        <div>Omnis placeat possimus quaerat quisquam reprehenderit? Amet aspernatur consequatur dignissimos dolore
            dolorem doloremque, exercitationem impedit inventore itaque nemo neque nobis odit, officiis pariatur
            provident quasi quia ratione tempore veniam voluptas!
        </div>
        <div>A adipisci alias consequatur dolorum, enim eum facere fugiat labore nostrum quaerat? Ad aliquam dolorum
            eius error fugiat harum illo in magni mollitia odio pariatur perferendis quaerat qui quod, totam!
        </div>
        <div>A deserunt explicabo hic officiis quas quasi? A, adipisci animi aut consectetur cupiditate distinctio eaque
            fuga illo magnam natus perspiciatis possimus quaerat quas, quasi quia ratione saepe tempora ut veniam.
        </div>
        <div>Aperiam, asperiores debitis dignissimos est fuga id repellendus. Atque consequuntur corporis deleniti,
            earum enim eos maiores minima, modi neque nobis obcaecati, odit placeat quae quas qui quisquam sapiente
            similique veniam!
        </div>
        <div>Corporis est nemo nostrum quos repellendus, voluptatibus? Ad aliquam aut cupiditate excepturi laudantium
            quam rerum. Accusamus consectetur delectus error fugiat nam officiis possimus quasi sapiente, tempora
            tempore velit vitae voluptate.
        </div>
        <div>Amet distinctio earum laborum possimus sunt ut, voluptates. Ab asperiores atque autem delectus fugit id
            illum magnam modi recusandae repellendus rerum, soluta, sunt, tempora. A iste itaque nostrum repellendus
            temporibus.
        </div>
        <div>Minus, optio placeat. Aliquid asperiores at consectetur est exercitationem, pariatur veritatis vitae
            voluptatum. A consequuntur doloribus, eius explicabo in nulla pariatur quibusdam saepe. Cum fugiat minima
            natus rem sapiente vel?
        </div>
        <div>Corporis cumque esse illum nihil odit officiis praesentium quis unde voluptates. Accusantium aliquam amet
            aperiam atque, autem doloribus ipsum iste nam natus necessitatibus neque nobis, odit quis sed voluptate
            voluptatum?
        </div>
        <div>Accusamus aliquam animi aperiam asperiores assumenda aut autem, commodi, dolorem earum eos eveniet,
            excepturi expedita fugiat hic incidunt necessitatibus nulla possimus quibusdam repellat saepe sunt tempora
            totam veniam voluptate voluptatem.
        </div>
        <div>Aperiam magnam nam nisi non unde. Amet animi consequuntur corporis cum deleniti dicta dolor doloribus harum
            hic ipsa iusto labore libero, maxime nihil nisi perferendis quo veritatis voluptate? Aspernatur, laborum.
        </div>
        <div>Architecto cum dicta tenetur unde veniam? At cumque quae velit veniam voluptatem! Adipisci dolorum esse
            expedita fuga laudantium magni modi quasi reprehenderit? Animi cupiditate ducimus eum incidunt rem sed
            soluta?
        </div>
        <div>Alias, amet, animi aspernatur dicta dolore ducimus, est harum minima nesciunt odit provident quam quod
            reiciendis. Beatae delectus eveniet laudantium, odio placeat quae quaerat recusandae similique tempore. A,
            molestiae, qui!
        </div>
        <div>Aperiam nemo pariatur vitae. Assumenda autem commodi dignissimos dolorem earum excepturi fugit ipsa
            molestiae, nobis placeat quas ratione recusandae rem rerum saepe sit tenetur totam unde! Libero minus nobis
            vero!
        </div>
        <div>Alias aut culpa, dicta dolores dolorum mollitia optio placeat rem. Animi enim minus nostrum numquam
            perferendis sint unde, veniam! Accusamus excepturi hic iste officiis, placeat quam saepe sint totam vel?
        </div>
        <div>Corporis culpa mollitia perferendis. Aliquam amet aperiam asperiores assumenda, blanditiis delectus dolore
            doloremque doloribus eaque eius explicabo fuga minima nam, natus omnis, quas sapiente similique tenetur vero
            voluptatem. Magni, maxime!
        </div>
        <div>Adipisci atque consectetur consequuntur et hic ipsam nisi perferendis quam quo velit? Doloribus eius
            exercitationem expedita ipsa maiores placeat provident sit veniam voluptas voluptatum. Alias ea labore minus
            molestiae quidem.
        </div>
        <div>Dolorum fuga itaque laboriosam libero molestiae neque recusandae sint sunt suscipit, tempore? Accusantium
            animi, autem consectetur distinctio earum exercitationem iure molestias non odio praesentium reiciendis,
            reprehenderit sed sunt veritatis voluptatibus?
        </div>
        <div>Id iure minus provident quam vel voluptatem! Assumenda cum ea, error facere facilis illo ipsum iste labore
            laboriosam modi nemo nisi, obcaecati officiis repellat sit voluptas voluptatibus! Dolores, illo ipsam.
        </div>
        <div>Aliquid atque libero perspiciatis quidem reprehenderit repudiandae tenetur voluptatem. Animi consequatur
            cum cumque dolores ducimus eius eos nihil quia suscipit voluptate? Accusantium aliquam dolore eligendi et
            ipsam placeat provident quod.
        </div>
        <div>Ad, alias animi asperiores distinctio dolor dolorem earum eligendi enim, exercitationem fugiat ipsam minus
            nam non omnis placeat porro soluta suscipit temporibus ullam unde! Ad eaque nam reprehenderit ut vero.
        </div>
        <div>Accusamus accusantium alias, aspernatur aut cumque dicta distinctio earum enim esse excepturi facilis illo
            illum ipsam iure maxime, minus nam nulla pariatur, provident quam quas ratione rem rerum suscipit tempora.
        </div>
        <div>Cumque itaque laborum natus odit quo? Consequuntur eaque magni minima repellat vitae. Architecto asperiores
            aspernatur beatae consequatur dolor eveniet explicabo facilis harum hic, illo, ipsa possimus repellat
            repellendus reprehenderit voluptatum.
        </div>
        <div>A architecto assumenda dolor dolore dolorem doloremque dolorum eius, excepturi facilis hic, id in incidunt
            inventore labore laudantium minima minus nobis nostrum pariatur perspiciatis quam repellendus repudiandae
            saepe temporibus unde.
        </div>
        <div>Accusamus asperiores, atque exercitationem id ipsum odio tempora! Aliquam animi beatae, dignissimos dolorum
            fugit libero quam repellat repudiandae tempore voluptatum? Accusamus alias corporis ea facilis incidunt
            laborum necessitatibus nobis quasi.
        </div>
        <div>Aspernatur commodi corporis deleniti distinctio dolorem enim expedita ipsum, maxime, molestias mollitia
            quam rerum tempora voluptatibus! Atque dicta itaque minima modi porro! Cum et laboriosam magnam molestiae
            tenetur veniam vero.
        </div>
        <div>Aliquam, at distinctio doloremque eius expedita facilis hic magnam minus modi natus nulla quam, quia saepe
            veniam voluptatum. Dolorem eligendi esse maiores maxime minus natus perspiciatis quam repellat tempora vero?
        </div>
        <div>Commodi delectus in sequi! Aperiam architecto autem culpa dicta dignissimos exercitationem hic labore porro
            quas quia quidem quis quo, reiciendis repellendus reprehenderit repudiandae sed soluta tempora tempore
            tenetur ut vitae.
        </div>
        <div>Accusantium consequuntur dignissimos earum fugit illum ipsum modi numquam pariatur, possimus soluta! A cum,
            delectus dolorem dolorum et ipsum, itaque libero magni necessitatibus nemo obcaecati quis sed velit
            voluptas, voluptatem!
        </div>
        <div>Consectetur, corporis culpa dolores ducimus ipsa nulla repellat veniam voluptatibus? Alias aliquam
            aspernatur beatae cumque dignissimos dolores eligendi fugit laboriosam, modi neque, odio omnis pariatur quia
            repudiandae sapiente unde vitae.
        </div>
        <div>Et iusto, optio. Deleniti doloremque eius ipsa. Aut consectetur consequuntur eius, fugiat id, iste libero
            nemo obcaecati officia perspiciatis placeat qui quos tempora, veniam voluptates. Eaque impedit iure numquam
            quos.
        </div>
        <div>Excepturi nesciunt rerum sit? Adipisci aperiam assumenda at delectus distinctio enim impedit in incidunt,
            iste iure laboriosam minima molestiae nobis nostrum obcaecati quam quas soluta velit vitae voluptatem!
            Ipsam, minima.
        </div>
        <div>Aliquam in quidem quis sit soluta sunt ullam velit. Ad, consectetur debitis deleniti distinctio eum facere
            ipsa laudantium nesciunt nihil numquam obcaecati quisquam rem sapiente sint sit temporibus voluptas
            voluptatibus!
        </div>
        <div>Aliquam aut beatae consequatur dolore eius esse eveniet exercitationem expedita illum in ipsum laboriosam
            minima natus necessitatibus, nemo officia perspiciatis praesentium provident quas, rem sed sint soluta
            voluptate. Expedita, magnam?
        </div>
        <div>Architecto asperiores blanditiis commodi dolorem ducimus earum eius esse est excepturi incidunt, ipsam
            itaque labore nesciunt non odit, officia perferendis quasi, qui quia quo sed ullam voluptas? Dolorum,
            eveniet, modi?
        </div>
        <div>Atque autem consequuntur cum debitis dicta eveniet ipsum itaque omnis optio quo rem, reprehenderit saepe
            sapiente unde veniam vero, voluptate! Alias consectetur, deleniti dicta eligendi exercitationem id in porro
            sed.
        </div>
        <div>Assumenda aut blanditiis cum cumque dicta illum maxime natus, ullam unde veniam. Ad aliquam consequatur
            cupiditate excepturi expedita impedit, magnam molestiae nemo nobis officia, perspiciatis quaerat quis
            repellendus unde voluptatibus.
        </div>
        <div>A accusamus aliquid amet animi assumenda deserunt dolor dolorem, explicabo hic ipsa, itaque iure magni
            minima odit quia quidem quis repellat reprehenderit sequi sint unde veniam voluptates! Iusto, nemo, neque!
        </div>
        <div>Aperiam atque deserunt dolore dolorum error eveniet, excepturi fugiat labore magni totam. Architecto beatae
            culpa, distinctio est eveniet soluta. Consequatur culpa dolores dolorum, facilis impedit modi nisi placeat
            quae sit.
        </div>
        <div>Accusantium alias animi autem, beatae cumque deserunt dolore doloremque dolorum earum eligendi ex excepturi
            exercitationem expedita facere harum ipsa modi nam neque quae quasi quos sed tempore totam voluptatem
            voluptatum!
        </div>
    </div>
</body>
</html>